<template>
    <div style="background-color: #f5f5f5; padding: 0px; border: 1px solid #ccc; border-radius: 6px; width: 100%; height: 88vh;">
      <div ref="chart" style="width: 45%; height: 380px; background-color: white; float: left; margin-top: 200px;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    name: 'EChartsBar',
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(this.$refs.chart);
  
        // 指定图表的配置项和数据
        const option = {
          title: {
            text: '考研热门专业',
            left: 'center', // 标题居中
            top: '20px' // 设置标题距离顶部的距离
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            name: '专业排名',
            type: 'category',
            data: [
              '计算机科学与技术', '金融学', '法学', '工商管理', '会计学',
              '心理学', '教育学', '英语', '新闻传播学', '历史学'
            ],
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                // 将超过一定长度的字符串在第二行显示
                if (value.length > 4) {
                  return value.slice(0, 4) + '\n' + value.slice(4);
                }
                return value;
              }
            }
          },
          yAxis: {
            name: '报考人数',
            type: 'value'
          },
          series: [
            {
              name: '考研专业',
              type: 'bar',
              data: [
                5000, 4500, 4000, 3500, 3000, 2500, 2000, 1500, 1000, 500
              ],
              itemStyle: {
                color: '#ADD8E6' // 设置柱状图颜色为淡蓝色
              }
            }
          ]
        };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  };
  </script>
  
  <style scoped>
  /* 可以在这里添加样式 */
  </style>